<template>
  <div class="billList group" v-if="level === 'group'">
    <div class="title"> {{ searchForm.orgName }}分类、汇总台账 </div>
    <el-table
        ref="table"
        :data="tableData"
        border
        highlight-current-row
        class="table"
        row-key="uuid"
    >
        <el-table-column type="" width="50" align="left">
            <template slot-scope="{ row }">
                <el-checkbox v-if="row.orgType > 0" v-model="row.isChecked" @change="changeCheckbox()"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="机构类型" prop="orgTypeName" show-overflow-tooltip width="200" align="left">
            <template slot-scope="{ row }">
                <div v-if="row.orgType > 0">{{ row.orgTypeName }}</div>
                <div v-else class="count">{{ row.orgTypeName }}</div>
            </template>
        </el-table-column>
        <el-table-column label="机构名称" prop="orgName" show-overflow-tooltip min-width="150" align="left" class-name="blue-column">
            <template slot-scope="{ row }">
                <div v-if="row.orgType > 0" @click="showBranchCompany(row)">{{ row.orgName }}</div>
                <div v-else class="count">{{ row.orgName }}</div>
            </template>
        </el-table-column>
        <el-table-column label="借方">
            <el-table-column label="金额" prop="debtorAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div v-if="row.orgType > 0">{{ row.debtorAmount }}</div>
                    <div v-else class="count">{{ row.debtorAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column label="贷方">
            <el-table-column label="金额" prop="creditorAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div v-if="row.orgType > 0">{{ row.creditorAmount }}</div>
                    <div v-else class="count">{{ row.creditorAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column label="余额">
            <el-table-column label="金额" prop="balanceAmount" width="150" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div v-if="row.orgType > 0">{{ row.balanceAmount }}</div>
                    <div v-else class="count">{{ row.balanceAmount }}</div>
                </template>
            </el-table-column>
        </el-table-column>
    </el-table>
  </div>
  <BranchCompany v-else-if="level === 'branchCompany'" :orgId="branchCompanyOrgId" :orgName="branchCompanyOrgName" @cancel="cancel"></BranchCompany>
  <ProjectDepartment v-else-if="level === 'projectDepartment'" :orgId="projectDepartmentOrgId" :orgName="projectDepartmentOrgName" @cancel="cancel"></ProjectDepartment>
</template>

<script>
import ProjectDepartment from '@/pages/comprehensiveReport/materialReport/subsummaryLedger/projectDepartment.vue'
import BranchCompany from '@/pages/comprehensiveReport/materialReport/subsummaryLedger/branchCompany.vue'
import {  getUuid, showLoading, hideLoading } from '@/utils/common'
import { mapState } from 'vuex'
import request from '@/api/comprehensiveReport/subsummaryLedger'
export default {
    data () {
        return {
            tableData: [],
            searchForm: {
                orgId: '',
            },
            mapObj: {},
            level: 'group',
            BranchCompanyOrgId: '',
            BranchCompanyOrgName: '',
            projectDepartmentOrgId: '',
            projectDepartmentOrgName: '',
        }
    },
    components: {
        BranchCompany,
        ProjectDepartment
    },
    computed: {
        ...mapState({
            orgInfo: state => state.userInfo.orgInfo,
            orgTypeList: state=>state.orgTypeList,
        }),
    },
    mounted () {
        if(localStorage.getItem('searchOrgId')) {
            this.searchForm.orgId = localStorage.getItem('searchOrgId')
            this.searchForm.orgName = localStorage.getItem('searchOrgOrgName')
            this.getList()
        }else if(this.orgInfo.orgId) {
            this.searchForm.orgId = this.orgInfo.orgId
            this.searchForm.orgName = this.orgInfo.orgName
            this.getList()
        }
    },
    methods: {
        objectSpanMethod ({ rowIndex, columnIndex }) {
            if (columnIndex === 2) {
                if (rowIndex  === 0) {
                    return {
                        rowspan: 1,
                        colspan: 3
                    }
                }
            }
        },
        getList () {
            if(this.tableData.length > 0) return
            showLoading()
            request.getgroupcompany(this.searchForm).then(res => {
                res = res.map(x=>{
                    x.isChecked = true
                    return x
                })
                this.tableData = res
                hideLoading()
            }).catch(()=>{
                hideLoading()
            })
        },
        //明细数据汇总方法
        uniqueArray (arr, key) {
            const map = new Map()
            return arr.filter(item => {
                const val = item[key] + '' || getUuid()
                return !map.has(val) && map.set(val, 1)
            })
        },
        count_ (obj) {
            return obj.children.reduce((prev, c) => {
                if(c.changeType === -1) {
                    return prev
                }else{
                    prev = (parseFloat(prev) + parseFloat(c.amount) || 0).toFixed(2)
                    return prev
                }
            }, 0)
        },
        showBranchCompany (row) {
            if(row.orgType === 2) {
                this.level = 'branchCompany'
                this.branchCompanyOrgId = row.orgId
                this.branchCompanyOrgName = row.orgName
            }else if(row.orgType === 4) {
                this.level = 'projectDepartment'
                this.projectDepartmentOrgId = row.orgId
                this.projectDepartmentOrgName = row.orgName
            }

        },
        cancel () {
            this.level = 'group'
        },
        changeCheckbox () {
            const orgType2 = this.tableData.find(x=>x.orgType === -2)//分子公司小计列
            const orgType2List = this.tableData.filter(x=>x.orgType === 2 && x.isChecked)//分子公司数据
            orgType2.debtorAmount = orgType2List.reduce((count, prev) => count + prev.debtorAmount, 0)
            orgType2.creditorAmount = orgType2List.reduce((count, prev) => count + prev.creditorAmount, 0)
            orgType2.balanceAmount = orgType2List.reduce((count, prev) => count + prev.balanceAmount, 0)
            const orgType4 = this.tableData.find(x=>x.orgType === -2)//集团直管小计列
            const orgType4List = this.tableData.filter(x=>x.orgType === 2 && x.isChecked)//集团直管数据
            orgType4.debtorAmount = orgType4List.reduce((count, prev) => count + prev.debtorAmount, 0)
            orgType4.creditorAmount = orgType4List.reduce((count, prev) => count + prev.creditorAmount, 0)
            orgType4.balanceAmount = orgType4List.reduce((count, prev) => count + prev.balanceAmount, 0)
        }
    }

}
</script>

<style lang="scss" scoped>
.group{
    .count{
        font-weight: 700;
        text-align: center;
        color:#000;
    }
    .title{
        font-size: 22px;
        margin: 30px;
        margin-top: 10px;
        text-align: center;
    }
}

</style>